<template>
  <el-dialog :before-close="closeclick" :visible="publicdialog" width="1200px" class="adddialog">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="发布标题" prop="title">
        <el-input v-model="ruleForm.title" style="width: 400px" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="发布类型" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择">
          <el-option label="公告" value="0"></el-option>
          <el-option label="公示" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布来源" prop="name">
        <el-input v-model="ruleForm.name" style="width: 400px" placeholder="请输入文本"></el-input>
      </el-form-item>
      <el-form-item label="发布内容" prop="desc">
        <vue-editor v-model="ruleForm.desc"></vue-editor>
        <!-- <el-input type="textarea" v-model="ruleForm.desc" style="width: 400px" placeholder="请输入内容"></el-input> -->
      </el-form-item>
      <!-- <el-form-item > -->
      <!-- 上传文件 -->
      <!-- <el-upload class="upload-demo" :accept="'image/*'" action="http://101.43.158.29:20000/pub/fileUploadRecord/upload"
        :data="{ userId: id }" :on-success="handleSuccess" :on-preview="handlePreview" :on-remove="handleRemove"
        :before-remove="beforeRemove" :headers="{ Authorization: token }" multiple :limit="3" :on-exceed="handleExceed"
        :file-list="fileList">
        <el-button size="small" type="primary" class="uploaditem" style="background:#0068ff;color: #fff;">上传图片附件</el-button>
      </el-upload> -->
      <!-- </el-form-item> -->
      <el-form-item style="margin:auto; margin-left: 410px">
        <el-button style="background:#0068ff;color: #fff;" @click="submitForm('ruleForm')">确认</el-button>
        <el-button @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { addList } from "@/api/announcement";
import {VueEditor} from "vue2-editor"
export default {
  data() {
    return {
      fileList: [],
      fileIdarray: [],
      publicdialog: false,
      token: this.$store.getters.token,
      id: this.$store.state.user.userInfo.id,
      ruleForm: {
        title: '',
        name: "",
        region: "",
        desc: ""
      },
      rules: {
        title: [{ required: true, message: "请输入发布标题", trigger: "blur" }],
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        region: [
          { required: true, message: "请填写发布来源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写发布内容", trigger: "blur" }],
      },

    };
  },
  components:{VueEditor},
  methods: {
    closeclick() {
      this.$refs.ruleForm.clearValidate()
      this.publicdialog = false;
      this.ruleForm = {
        name: "",
        region: "",
        desc: "",
      }
    },
    opendialog() {
      this.publicdialog = true;
    },
    async submitForm(formName) {
      const valid = await new Promise((resolve) => {
        this.$refs[formName].validate((valid) => {
          resolve(valid);
        });
      });

      if (valid) {
        const res = await addList({
          content: this.ruleForm.desc,
          source: this.ruleForm.name,
          type: this.ruleForm.region,
          title: this.ruleForm.title,
          userId: this.id,
          fileId: this.fileIdarray
        });
        if (res.data.state === 20000) {
          this.$message.success("添加成功");
          this.ruleForm = {
            name: "",
            region: "",
            desc: "",
          };
          this.fileList = []
          this.publicdialog = false;
          this.$parent.$parent.getsum();
          this.$parent.$parent.getpublicsum();
          this.$parent.$parent.getcountPublicity();
          this.$parent.$parent.getList();
          // location.reload()
          this.$forceUpdate(); // 手动更新组件
        } else {
          this.$message.error('服务器忙!');
        }
      } else {
        // this.$message.error('添加失败请稍后再试')
        return false;
      }
    },
    resetForm(formName) {
      this.$refs.ruleForm.clearValidate()
      this.ruleForm = {
        name: "",
        region: "",
        desc: "",
        fileList: "",
        fileId: ''
      };
      this.publicdialog = false;
      // this.$refs[formName].resetFields();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(response, file, fileList) {
      this.fileIdarray.push(response.data)
      console.log(this.fileIdarray);

    },
  },
  created() {
  },
};
</script>

<style>
 @import url('../../../styles/quill.core.css');
.el-button {
  margin-top: 2px;
  margin-left: 20px;
}
.adddialog{
  
  height: 800px;
  margin-top: -80px;
}
</style>